<template>
  <view class="category">
    <a-search
      id="search"
      disabled
      placeholder="搜索商品"
      @tap.native="goSearch"
    ></a-search>
    <van-tree-select
      :items="items"
      :height="treeSelectH"
      :scroll-top="scrollTop"
      :main-active-index="mainActiveIndex"
      :active-id="activeId"
      @clickNav.native="onClickNav"
      main-active-class="van-active"
      main-item-class="left-select"
      @scrolltolower="scrolltolower"
      @scroll.native="scroll"
    >
      <template v-slot:content>
        <view class="cate-inner">
          <view class="cate-banner" v-if="selectCategory.thumbnail">
            <image class="cate-banner-img" :src="selectCategory.thumbnail" />
          </view>
          <view class="cate-title">{{ selectCategory.name || "" }}</view>
          <view class="goods-wrap">
            <a-goods-card
              v-for="(goods, i) in goodsCategoryList"
              :key="i"
              :goods="goods"
              type="row"
              total-like
            ></a-goods-card>
          </view>
          <a-empty
            v-if="goodsCategoryList.length === 0"
            :src="'empty/order.png' | prefixOssUrl"
            :tips="['暂无相关产品']"
          ></a-empty>
          <a-logo type="text"></a-logo>
        </view>
      </template>
    </van-tree-select>
  </view>
</template>

<script>
import EventBus from "@/event/index";
import { model } from "@/model";
const { PageBo, Goods } = model.collection;

export default {
  components: {},
  data() {
    return {
      treeSelectH: "100vh",
      total: 0,
      params: {
        pageIndex: 1,
        pageSize: 10,
      },
      form: {
        query: {
          goodsCategoryId: "",
        },
      },
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      goodsCategory: {},
      items: [],
      goodsCategoryList: [],
      selectCategory: {},
      mainActiveIndex: 0
    };
  },
  onLoad() {
    this.goodsCategory = {};
    this.goodsCategoryList = [];
    this.selectCategory = {};
    this.items = [];
    this.paramsActiveId = EventBus.categoryFirstRenderCartActiveId;
    this.getGoodsCategory();
    EventBus.$on("paramsActiveId", (activeId) => {
      this.onClickNav({ detail: { index: this.items.findIndex((item)=> item.activeId === activeId)  } })
    });
  },

  onReady() {
    this.getNodeInfo("search").then((data) => {
      this.treeSelectH = `calc(100vh - ${data.height}px)`;
    });
  },
  methods: {
    getGoodsCategory() {
      PageBo.sendApi("info", {
        params: {
          page: "pageGoodsCategory",
        },
        data: {},
      }).then((res) => {
        const { status, data } = res;
        if (status) {
          this.form.query.goodsCategoryId = this.black_Get(
            data,
            "goodsCategory[0].id"
          );
          this.goodsCategory = data.goodsCategory;
          data.goodsCategory.map((i) => {
            this.items.push({
              activeId: i.id,
              text: i.name,
            });
          });
          this.getGoodsCategoryList();
        }
      });
    },
    getGoodsCategoryList() {
      Goods.sendApi("page", {
        params: this.params,
        data: this.form,
      }).then((res) => {
        const { status, data, page } = res;
        if (status) {
          this.total = page.total;
          this.goodsCategoryList = this.goodsCategoryList.concat(data);
          this.paramsActiveId && this.onClickNav({ detail: { index: this.items.findIndex((item)=> item.activeId === this.paramsActiveId)  } });
        }
      });
    },
    scroll(e) {
      this.old.scrollTop = e.detail;
    },
    onClickNav(e) {
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
      this.goodsCategoryList = [];
      this.params.pageIndex = 1;
      let { index } = e.detail;
      this.mainActiveIndex = index;
      this.form.query.goodsCategoryId = this.items[index].activeId;
      Goods.sendApi("page", {
        params: this.params,
        data: this.form,
      }).then((res) => {
        const { status, data, page } = res;
        if (status) {
          this.total = page.total;
          this.goodsCategoryList = data;
        }
      });
      this.selectCategory = this.goodsCategory.find(
        (i) => i.id === this.form.query.goodsCategoryId
      );
    },
    scrolltolower() {
      if (this.total > this.params.pageIndex * this.params.pageSize) {
        this.params.pageIndex++;
        this.getGoodsCategoryList();
      }
    },
    goSearch() {
      this.nav("/subpackage/goods/pages/search/index");
    },
  },
};
</script>

<style lang="less" scoped>
@bg-color: #f7f7f7;

.category {
  .flexLayout(@dir: column);
  min-height: 100vh;
  background: @bg-color;
  overflow: auto;

  /deep/ .van-tree-select {
    height: 100%;

    &__nav {
      width: 150rpx;
      background-color: @bg-color;
    }

    .van-sidebar {
      background: #fff;

      &-item {
        font-size: 26rpx;
        white-space: nowrap;
        background: #fff;
        border-top-right-radius: 30rpx;

        &--selected {
          background: @bg-color;
          border-left: 6rpx solid #db187c;
          border-top-right-radius: 0rpx;
        }
      }
    }

    &__content {
      background: @bg-color;
    }
  }

  van-tree-select {
    flex: 1;

    #shadow-root {
      height: 100%;
    }

    /deep/ van-sidebar-item {
      background: @bg-color;
      border-top-right-radius: 30rpx;
    }
  }

  .cate-inner {
    padding: 0 10rpx 20rpx 18rpx;

    .cate-banner {
      margin-top: 20rpx;

      &-img {
        width: 526rpx;
        height: 162rpx;
        border-radius: 10rpx;
      }
    }

    .cate-title {
      font-size: 30rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .goods-wrap {
      /deep/ .goods-card {
        width: 510rpx;
        padding: 10rpx 0rpx 10rpx 10rpx;
        margin-bottom: 15rpx;
        border-radius: 15rpx;
        background: #ffffff;

        &-cover {
          width: 180rpx;
          height: 180rpx;
          border-radius: 15rpx;

          image {
            width: 180rpx;
            height: 180rpx;
            border-radius: 15rpx;
          }
        }

        &-info {
          width: 302rpx;

          .goods-name {
            height: 36rpx;
            font-size: 28rpx;
          }

          .goods-keys {
            font-size: 24rpx;
          }

          .goods-amount {
            font-size: 32rpx;
          }

          .goods-like {
            &-count {
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}
</style>
